import React from 'react';
import { Modal, Spin } from 'antd';
import ProForm, { ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-form';



const SaveForm = (props) => {
  const { modalVisible, onCancel, onSubmit, loading, record } = props;


  return (
    <Modal
      destroyOnClose
      title={record.id ? '修改角色信息' : '添加角色信息'}
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Spin tip="正在处理..." spinning={loading}>
        <ProForm
          onFinish={async (value) => {
            const params = value;
            if (record.id) {
              params.id = record.id;
            }
            await onSubmit(params);
          }}
          initialValues={{ status: true, ...record }}
        >
          <ProFormText
            name="name"
            label="角色名称"
            fieldProps={{
              allowClear: true,
            }}
            placeholder="请输入角色名称"
            rules={[{ required: true, message: '请输入角色名称！' }]}
          />
          <ProFormTextArea
            name="remarks"
            label="备注"
            fieldProps={{
              allowClear: true,
            }}
            place
            holder="请输入备注"
          />
         
          {!record.id && (
            <ProFormSwitch
              name="status"
              label="状态"
              checkedChildren="启用"
              unCheckedChildren="禁用"
            />
          )}
        </ProForm>
      </Spin>
    </Modal>
  );
};

export default SaveForm;
